<script setup>
import {ref, defineProps, defineEmits, watch} from "vue";
import axios from "axios";

const emit = defineEmits()
const props = defineProps({
  eventDetailVisiable: Boolean,
  currentEventDetail: Object
})
const Visiable = ref(false)
watch(() => props.eventDetailVisiable, newVal => {
  Visiable.value = newVal;
  if(newVal){
    getProcessors()
    activeNames.value=['1']
  }
})
const formLabelWidth = '140px'
const handleClose = () => {
  emit('close', false);
}

//处理人相关
const processors=ref({})
const getProcessors=()=>{
  axios.get(`/eventDispose/getProcessorsInfo?processorsId=${props.currentEventDetail.event.currentProcessorsId}`).then(resp=>{
    processors.value=resp.data
  }).catch(err=>{
    processors.value.account=err.response.data
  })
}

const activeNames=ref([])
</script>

<template>
  <el-dialog v-model="Visiable" width="500" @close="handleClose">
    <el-form :model="props.currentEventDetail" class="demo-ruleForm">

      <el-collapse v-model="activeNames">
        <!-- 隐患相关 -->
        <el-collapse-item title="隐患相关" name="1">
          <!--      <el-form-item label="充电桩id" :label-width="formLabelWidth">-->
          <!--        <el-input-->
          <!--            v-model="props.currentEventDetail.event.chargingPileId"-->
          <!--            placeholder="充电桩ID"-->
          <!--            disabled-->
          <!--            class="input-with-select"-->
          <!--        />-->
          <!--        <span class="form-explain">（只读）</span>-->
          <!--      </el-form-item>-->
          <el-form-item label="充电站名称：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.stationName"-->
            <!--            placeholder="详细地点"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.stationName}}
          </el-form-item>
          <el-form-item label="充电桩编号：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.pileCode"-->
            <!--            placeholder="详细地点"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.pileCode}}
          </el-form-item>
          <el-form-item label="地址位置：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.address"-->
            <!--            placeholder="详细地点"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.address}}
          </el-form-item>
          <el-form-item label="登记时间：" :label-width="formLabelWidth">
            <!--        <el-date-picker-->
            <!--            v-model="props.currentEventDetail.event.created"-->
            <!--            type="datetime"-->
            <!--            placeholder="登记时间"-->
            <!--            format="YYYY/MM/DD hh:mm:ss"-->
            <!--            value-format="YYYY-MM-DD h:m:s"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.created}}
          </el-form-item>
          <el-form-item label="详细地点：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.location"-->
            <!--            placeholder="详细地点"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.location}}
          </el-form-item>
          <el-form-item label="联络人：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.contacts"-->
            <!--            placeholder="联络人"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.contacts}}
          </el-form-item>
          <el-form-item label="联络人电话：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.contactNumber"-->
            <!--            placeholder="联络人电话"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.contactNumber}}
          </el-form-item>
          <el-form-item label="优先级：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.priority"-->
            <!--            placeholder="优先级"-->
            <!--            disabled-->
            <!--        />-->
            <span v-if="props.currentEventDetail.event.priority==1">低级</span>
            <span v-else-if="props.currentEventDetail.event.priority==2">中级</span>
            <span v-else-if="props.currentEventDetail.event.priority==3">高级</span>
            <span v-else-if="props.currentEventDetail.event.priority==4">最高级</span>
          </el-form-item>
          <el-form-item label="状态：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.currentStatus"-->
            <!--            placeholder="状态"-->
            <!--            disabled-->
            <!--        >-->
            <!--        </el-input>-->
            <span v-if="props.currentEventDetail.event.currentStatus==0">待处理</span>
            <span v-else-if="props.currentEventDetail.event.currentStatus==1">处理中</span>
            <span v-else-if="props.currentEventDetail.event.currentStatus==2">已完成</span>
            <span v-else-if="props.currentEventDetail.event.currentStatus==-1">已撤回</span>
          </el-form-item>
          <el-form-item v-if="props.currentEventDetail.event.currentStatus === -1" label="撤回原因：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.returnCause"-->
            <!--            placeholder="撤回原因"-->
            <!--            disabled-->
            <!--            style="width: 100%;"-->
            <!--        />-->
            {{props.currentEventDetail.event.returnCause}}
          </el-form-item>
          <el-form-item label="事件描述：" :label-width="formLabelWidth">
            <!--        <el-input-->
            <!--            v-model="props.currentEventDetail.event.description"-->
            <!--            placeholder="事件描述"-->
            <!--            disabled-->
            <!--        />-->
            {{props.currentEventDetail.event.description}}
          </el-form-item>
        </el-collapse-item>

      <!-- 处理人相关 -->
      <el-collapse-item title="处理人相关" name="2">
        <div v-if="props.currentEventDetail.event.currentProcessorsId">
          <el-form-item label="处理人：" :label-width="formLabelWidth">
            <!--          <el-input-->
            <!--              v-model="props.currentEventDetail.event.currentProcessorsId"-->
            <!--              placeholder="处理人ID"-->
            <!--              disabled-->
            <!--          />-->
            {{processors.account}}
          </el-form-item>
          <el-form-item label="预计完成时间：" :label-width="formLabelWidth">
            <!--          <el-date-picker-->
            <!--              v-model="props.currentEventDetail.eventDispose.estimatedTime"-->
            <!--              type="datetime"-->
            <!--              placeholder="预计完成时间"-->
            <!--              format="YYYY/MM/DD hh:mm:ss"-->
            <!--              value-format="YYYY-MM-DD h:m:s"-->
            <!--              disabled-->
            <!--          />-->
            {{props.currentEventDetail.eventDispose.estimatedTime}}
          </el-form-item>
          <el-form-item label="任务内容：" :label-width="formLabelWidth">
            <!--          <el-input-->
            <!--              v-model="props.currentEventDetail.eventDispose.taskContent"-->
            <!--              placeholder="任务内容"-->
            <!--              disabled-->
            <!--          />-->
            {{props.currentEventDetail.eventDispose.taskContent}}
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item :label-width="formLabelWidth">
            <span>======暂无处理人======</span>
          </el-form-item>
        </div>
      </el-collapse-item>

      <!-- 处理相关 -->
        <el-collapse-item title="处理相关" name="3">
          <div v-if="props.currentEventDetail.eventDispose && props.currentEventDetail.eventDispose.transactIllustrate">
            <el-form-item label="办理说明：" :label-width="formLabelWidth">
              <!--          <el-input-->
              <!--              v-model="props.currentEventDetail.eventDispose.transactIllustrate"-->
              <!--              placeholder="办理说明"-->
              <!--              disabled-->
              <!--          />-->
              {{props.currentEventDetail.eventDispose.transactIllustrate}}
            </el-form-item>
            <el-form-item label="现场图片：" :label-width="formLabelWidth">
              <img
                  :src="props.currentEventDetail.eventDispose.sceneImageUrl"
                  style="width: 50%"
              />
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item :label-width="formLabelWidth">
              <span>======暂无处理结果======</span>
            </el-form-item>
          </div>
        </el-collapse-item>

      </el-collapse>
    </el-form>
  </el-dialog>
</template>

<style scoped>
/* 对话框整体样式 */
.el-dialog {
  border-radius: 4px;
}

/* 对话框标题样式 */
.el-dialog__header {
  background-color: #f5f7fa;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

/* 对话框标题文字样式 */
.el-dialog__title {
  font-size: 16px;
  color: #303133;
}

/* 对话框内容区域样式 */
.el-dialog__body {
  padding: 20px;
}

/* 隐患相关、处理人相关、处理相关标题样式 */
.el-collapse-item__header {
  font-weight: bold;
  color: #606266;
  padding-left: 20px;
}

/* 折叠面板激活时的标题样式 */
.el-collapse-item.is-active .el-collapse-item__header {
  color: #409EFF;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 12px;
}

/* 表单项标签样式 */
.el-form-item__label {
  color: #909399;
  font-weight: normal;
}

/* 表单项内容样式 */
.el-form-item__content {
  color: #606266;
}

/* 禁用输入框样式 */
.el-input.is-disabled .el-input__inner {
  color: #C0C4CC;
}

/* 文本展示样式 */
.display-text {
  font-size: 14px;
  line-height: 1.5;
}

/* 图片展示样式 */
.image-preview {
  width: 100%;
  max-width: 200px;
  margin-top: 10px;
}

/* 暂无处理人/处理结果样式 */
.no-data {
  color: #909399;
  text-align: center;
  margin-top: 10px;
}

/* 折叠面板分隔线 */
.el-collapse-item__wrap {
  border-bottom: 1px solid #e1e4e8;
}

/* 折叠面板内容样式 */
.el-collapse-item__content {
  padding: 10px 20px;
}

/* 状态和优先级标签样式 */
.status-tag, .priority-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
}

/* 状态标签颜色 */
.status-tag {
  background-color: #909399;
}

/* 优先级标签颜色 */
.priority-tag {
  background-color: #E6A23C;
}

/* 高级和最高级优先级标签颜色 */
.priority-tag.high, .priority-tag.urgent {
  background-color: #F56C6C;
}
</style>